<template>
  <div class="content">
    <!--粒子背景-->
    <!--<vue-particles-->
    <!--color="#0BEAEB"-->
    <!--:particleOpacity="0.6"-->
    <!--:particlesNumber="80"-->
    <!--shapeType="polygon"-->
    <!--:particleSize="4"-->
    <!--linesColor="#0BEAEB"-->
    <!--:linesWidth="1"-->
    <!--:lineLinked="true"-->
    <!--:lineOpacity="0.4"-->
    <!--:linesDistance="150"-->
    <!--:moveSpeed="2"-->
    <!--:hoverEffect="true"-->
    <!--hoverMode="grab"-->
    <!--:clickEffect="true"-->
    <!--clickMode="push"-->
    <!--class="back-img"-->
    <!--&gt;</vue-particles>-->
    <div class="login">
      <!--登录表单-->
      <el-form :model="loginForm" :rules="loginRule" ref="loginRef" class="login_form">
        <el-form-item label="账号" prop="username" label-width="60px">
          <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="请输入账号" @keyup.enter.native="userLogin"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="60px" class="password">
          <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="请输入密码"
                    show-password @keyup.enter.native="userLogin"></el-input>
        </el-form-item>
        <!--<el-form-item label="验证码" prop="check" label-width="80px" class="check">-->
        <!--<el-input v-model="loginForm.check" placeholder="请输入验证码"></el-input>-->
        <!--</el-form-item>-->
        <div class="link_register">没有账号?请
          <el-link type="primary" class="link_text" href="/register">注册</el-link>
        </div>
        <el-form-item>
          <el-button type="primary" @click="userLogin" class="loginBtn">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../api/api'
import CryptoJS from 'crypto-js'

export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '123456',
        key: ''
      },
      tmpPwd: '',
      chars: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
      loginRule: {
        username: [
          {
            required: true,
            message: '账号不能为空！',
            trigger: ['blur']
          },
          {
            min: 2,
            max: 20,
            message: '账号长度为 2 到 20 个字符！',
            trigger: ['blur']
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空！',
            trigger: ['blur']
          },
          {
            min: 6,
            max: 20,
            message: '密码长度为 6 到 20 个字符！',
            trigger: ['blur']
          }
        ],
        check: [
          {
            required: true,
            message: '验证码不能为空！',
            trigger: ['blur']
          },
          {
            min: 4,
            max: 4,
            message: '验证码长度为 4 个字符！',
            trigger: ['blur']
          }
        ]
      }
    }
  },
  methods: {
    userLogin () {
      this.$refs.loginRef.validate(valid => {
        if (!valid) return
        for (let i = 0; i < 16; i++) {
          this.loginForm.key += this.chars[Math.floor(Math.random() * this.chars.length)]
        }
        this.tmpPwd = this.loginForm.password
        this.loginForm.password = CryptoJS.AES.encrypt(
          CryptoJS.enc.Utf8.parse(this.loginForm.password),
          CryptoJS.enc.Utf8.parse(this.loginForm.key),
          { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }).toString()
        window.sessionStorage.setItem('key', this.loginForm.key)
        window.sessionStorage.setItem('pwd', this.loginForm.password)
        login(this.loginForm)
          .then(response => {
            if (response.data.code !== 0) {
              this.loginForm.password = this.tmpPwd
              if (Object.keys(response.data.message)[0] === 'username') {
                return this.$message.error(response.data.message.username[0])
              } else if (Object.keys(response.data.message)[0] === 'password') {
                this.loginForm.password = this.tmpPwd
                return this.$message.error(response.data.message.password[0])
              } else {
                this.loginForm.password = this.tmpPwd
                return this.$message.error('登录失败！')
              }
            }
            this.$message.success('登录成功！')
            window.sessionStorage.setItem('id', response.data.data.id)
            window.sessionStorage.setItem('token', response.data.data.token)
            window.sessionStorage.setItem('username', response.data.data.username)
            this.$router.push('/index')
            this.loginForm = {
              username: 'admin',
              password: '123456',
              key: ''
            }
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  /*全局背景*/
  .content {
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    position: fixed;
  }

  /*登录表单*/
  .login {
    width: 400px;
    height: 230px;
    padding: 45px 35px 0 20px;
    background: rgba(255, 255, 255, 1);
    /*box-shadow: rgb(11, 234, 235) 0px 0px 5px inset;*/
    border: 1px solid #000000;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .password {
    margin-bottom: 5px;
  }

  /*输入框*/
  /deep/ .el-input__inner {
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
  }

  /deep/ .el-input__inner:focus {
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
  }

  /*注册链接*/
  .link_register {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .link_text {
    font-size: 10px;
  }

  /*登录按钮*/
  .loginBtn {
    width: 95%;
    color: #000000;
    margin-left: 20px;
    margin-top: 20px;
    letter-spacing: 20px;
  }

  /deep/ .el-button--primary {
    background: transparent;
    border: 1px solid rgb(0, 0, 0);
  }

  /deep/ .el-button--primary:hover {
    color: #000000;
    background: #f5f7fa;
    border: 1px solid rgb(0, 0, 0);
  }
</style>
